/*
 * @Author: bclz
 * @Date: 2022-02-08 11:23:28
 * @LastEditTime: 2022-02-19 15:44:38
 * @LastEditors: bclz
 * @Description: no description
 */
/**
 * Created by HZH
 * Date-Time: 2022-01-26
 */

import React, { useState } from 'react';
import styles from './index.less';
import { TheTable } from '@/components';
import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import { option } from './echartOpt';

const valueEnum = {
  0: 'close',
  1: 'running',
  2: 'online',
  3: 'error',
};
const tableListDataSource = [];

for (let i = 0; i < 20; i += 1) {
  tableListDataSource.push({
    key: i,
    place: 'xxxx地点',
    orderId: `orderId${i}`,
    deviceId: `deviceId${i}`,
    node: `节点 ${i}`,
    alarmType: `温度上限报警`,
    alarmTime: Date.now() - Math.floor(Math.random() * 2000),
    progress: '50%',
    takeTimes: `${Math.floor(Math.random() * 2000) * i}ms`,
    status: '',
    value: i,
    operation: i,
  });
}

const columns = [
  {
    title: '工单号',
    dataIndex: 'orderId',
    key: 'orderId',
  },
  {
    title: '地点',
    dataIndex: 'place',
    key: 'place',
  },
  {
    title: '设备号',
    dataIndex: 'deviceId',
    key: 'deviceId',
  },
  {
    title: '线路',
    dataIndex: 'node',
    key: 'node',
  },
  {
    title: '报警时间',
    dataIndex: 'alarmTime',
    valueType: 'dateTime',
    key: 'alarmTime',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
  },
];

export default (props) => {
  const { children } = props;

  const [columnsStateMap, setColumnsStateMap] = useState({
    name: {
      show: false,
      order: 2,
    },
  });

  return (
    <div className={styles.innerContent}>
      <div className={styles.tableBlock}>
        <TheTable
          columns={columns}
          scroll={{ y: 300 }}
          request={(params) =>
            Promise.resolve({
              data: tableListDataSource.filter((item) => {
                if (!params?.keyWord) {
                  return true;
                }
                if (item.name.includes(params?.keyWord) || item.status.includes(params?.keyWord)) {
                  return true;
                }
                return false;
              }),
              success: true,
            })
          }
          options={{
            search: true,
          }}
          rowKey="key"
          columnsState={{
            value: columnsStateMap,
            onChange: setColumnsStateMap,
          }}
          search={false}
          dateFormatter="string"
          headerTitle="警报列表"
        />
      </div>
      <div className={styles.chartBlock}>
        <ReactEcharts style={{ height: '80%' }} option={option} />
      </div>
    </div>
  );
};
